<template>
  <div>
    <!-- <h3>当前的count值为: {{ $store.state.count }}</h3> -->
    <h3>{{ $store.getters.showNum }}</h3>
    <button @click="handleAdd">+1</button>
    <button @click="handleAddN">+N</button>
    <button @click="handleAddAction">+1 (async: 1s)</button>
    <button @click="handleAddNAction">+N (async: 1s)</button>
  </div>
</template>
<script>
export default {
  data() {
    return {}
  },
  created() {},
  methods: {
    handleAdd() {
      // this.$store.state.count++
      // 不推荐, 不利于维护
      this.$store.commit('add')
    },
    handleAddN() {
      // 加一个随机数~
      this.$store.commit('addN', this.$math.ceil(this.$math.random() * 10))
    },
    handleAddAction() {
      this.$store.dispatch('addAsync')
    },
    handleAddNAction() {
      this.$store.dispatch(
        'addNAsync',
        this.$math.ceil(this.$math.random() * 10)
      )
    }
  }
}
</script>

<style lang="less" scoped></style>
